<template>
  <div>
    <div>
      <div class="blockLeft">
        <span class="aSpan">{{ptitle}}</span>
      </div>
      <div :class="pline === 1?'blockRightLong':'blockRight'">
        <span v-if="preadonly" class="aSpan">{{content}}</span>
        <span v-else>
          <input type="text" class="aInput" :value="content" readonly="readonly">
          <button class="selectRecord" @click="showSelect"/>
        </span>
      </div>
    </div>
    <el-dialog :title="ptitle"
               :visible.sync="dialogVisible"
               width="980px"
               top="5vh"
               append-to-body>
      <bpm-d-simplechoose v-if="dialogType==='simplechoose'"
                          :title="ptitle"
                          :pselectType="pselectType"
                          ref="seChoose"
                          @selectClicked="selectClicked"
                          @closeClicked="setDialogClose"/>
      <bpm-d-commonchoose v-else-if="dialogType==='commonchoose'"
                          :title="ptitle"
                          :pselectType="pselectType"
                          ref="cnChoose"
                          @selectClicked="selectClicked"
                          @closeClicked="setDialogClose"/>
      <bpm-d-personchoose v-else-if="dialogType==='personchoose'"
                          :title="ptitle"
                          :pselectType="pselectType"
                          @selectClicked="selectClicked"
                          @closeClicked="setDialogClose"/>
      <bpm-d-taskchoose v-else-if="dialogType==='taskchoose'"
                        :title="ptitle"
                        :pselectType="pselectType"
                        @selectClicked="selectClicked"
                        @closeClicked="setDialogClose"/>
    </el-dialog>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'bpmCBlockadvance',
  model: {
    prop: 'pcontent',
    event: 'contentChanged'
  },
  props: {
    // 只读/可编辑,
    preadonly: {
      type: Boolean,
      default: false
    },
    // 可能占一整行或行的一半
    pline: {
      type: Number,
      default: 2
    },
    ptitle: {
      type: String,
      default: ' '
    },
    pcontent: {
      type: String,
      default: '{}'
    },
    pselectType: {
      type: String,
      default: ''
    },
    validateExp: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data: function () {
    return {
      dialogVisible: false
    }
  },
  computed: {
    ...mapState(['chooseDialogEnum', 'pageTypeEnum']),
    ...mapState(['ssc', 'otherI18n']),
    content () {
      console.log('advance content--------------------', this.pcontent)
      return JSON.parse(this.pcontent).name
    },
    dialogType () {
      return this.advanceDialogType(this.pselectType)
    },
    // 配置高级选择框的展示值和实际保存值的字典
    translateDic () {
      return this.advanceTranslateDic(this.pselectType)
    }
  },
  methods: {
    ...mapActions(['queryAppListByType']),
    ...mapActions(['getCrossCompany', 'queryStaffBankInfo', 'initChooseList']),
    showSelect () {
      this.beforeSelectShow()
      switch (this.pselectType) {
        case this.chooseDialogEnum.reimbursecompanyname: {
          let param = {}
          param.me = this
          param.async = true
          this.getCrossCompany(param)
        }
          break
        case this.chooseDialogEnum.accountBankNumber: {
          let param = {}
          param.async = true
          param.me = this
          param.gatherupNumber = this.ssc.reimburse.whBtReimburse.gatherupNumber
          this.queryStaffBankInfo(param)
        }
          break
        case this.chooseDialogEnum.gatherupname:
          break
        case this.chooseDialogEnum.trainlink: {
          let bpdname = 'HR.StaffTrain'
          this.queryAppListByType({me: this, bpdName: bpdname})
        }
          break
        case this.chooseDialogEnum.aboardlink: {
          let bpdname = 'HRV3.FrgnaMgmt-VisaApply'
          this.queryAppListByType({me: this, bpdName: bpdname})
        }
          break
        case this.chooseDialogEnum.reimbursecompanycostcenter:
          let companyCode = this.$store.state.ssc.reimburse.whBtReimburse.reimbursecompanycode
          if (companyCode === null || companyCode === '' || typeof companyCode === 'undefined') {
            this.alert(this.getResource('alert.information.qxxzgs'))
            return
          }
          break
        case this.chooseDialogEnum.postcostcenter:
          break
        case this.chooseDialogEnum.splitcostcenter:
          console.log('choose splitcostcenter...')
          let reimburseCompanyCode = this.$store.state.ssc.reimburse.whBtReimburse.reimbursecompanycode
          if (reimburseCompanyCode === null || reimburseCompanyCode === '' || typeof reimburseCompanyCode === 'undefined') {
            this.alert(this.getResource('alert.information.qxxzgs'))
            return
          }
          break
        default:
          break
      }
      this.dialogVisible = true
    },
    selectClicked (aItem) {
      // console.log('clicked!!')
      console.log('advance selected:::', aItem, this.translateDic)
      if (this.pselectType === this.chooseDialogEnum.gatherupname) {
        aItem = aItem[0]
      }
      // add chg
      if (this.pselectType === this.chooseDialogEnum.reimbursecompanyname) {
        if (!this.chgCompanySelect()) {
          return
        }
      } else if (this.pselectType === this.chooseDialogEnum.reimbursecompanycostcenter) {
        if (!this.chgCostCenterSelect()) {
          return
        }
      }
      let obj = '{}'
      if (this.translateDic !== {}) {
        let json = {
          name: aItem[this.translateDic.name],
          value: aItem[this.translateDic.value]
        }
        obj = JSON.stringify(json)
        console.log('blockadvance contentChanged before', obj)
        this.$emit('contentChanged', obj)
      }
      this.$emit('valueChanged', obj)
      this.$emit('sltvalueChanged', aItem)
      if (this.dialogType === 'simplechoose') {
        this.$refs.seChoose.clearList()
      } else if (this.dialogType === 'commonchoose') {
        this.$refs.cnChoose.clearList()
      }
      this.dialogVisible = false
    },
    setDialogClose () {
      if (this.dialogType === 'simplechoose') {
        this.$refs.seChoose.clearList()
      } else if (this.dialogType === 'commonchoose') {
        this.$refs.cnChoose.clearList()
      }
      this.dialogVisible = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .blockLeft {
    background-color: #f4f4f4;
    float: left;
    text-align: center;
    width: 140px;
    min-height: 26px;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
  }

  .blockRight {
    background-color: #eff3f6;
    float: left;
    padding-left: 8px;
    min-height: 26px;
    width: 340px;
    min-width: 340px;
    text-align: left;
  }

  .blockRightLong {
    background-color: #eff3f6;
    float: left;
    padding-left: 8px;
    min-height: 26px;
    width: 830px;
    min-width: 830px;
    text-align: left;
  }

  .selectRecord {
    background: url(/static/images/contentBg.png) no-repeat -116px -212px;
    cursor: pointer;
    width: 16px;
    height: 15px;
    border: 0;
  }

  .aSpan {
    display: block;
    margin-top: 4px;
  }

  .aInput {
    width: 240px;
    margin-top: 4px;
  }
</style>
